<template>
  <up-navbar left-icon="" bg-color="#fff" placeholder>
    <template #center>
      <view class="w-full flex items-center px-24rpx">
        <view class="mr-16rpx h-66rpx w-66rpx flex items-center justify-center rounded-full bg-#f6f6f6" @tap="back">
          <up-icon name="arrow-left" size="20rpx" color="#000" bold />
        </view>
        <view class="search-input">
          <up-input :custom-style="inputCustomStyle" shape="circle" placeholder="搜职位/公司" :prefix-icon="search"
            border="none" font-size="24rpx" clearable v-model="searchText">
            <template #suffix>
              <up-button :custom-style="btnCustomStyle" shape="circle" @click="searchList">
                <text class="text-24rpx">
                  搜索
                </text>
              </up-button>
            </template>
          </up-input>
        </view>
      </view>
    </template>
  </up-navbar>
</template>

<script setup lang="ts">
  // import search from '@/static/images/tab/home-03.png';
  import { watch } from 'vue';
  import { usePageRouter } from '@/hooks';
  const search = 'https://yiliao.test03.qcw800.com/static/images/tab/home-03.png'
  const emit = defineEmits(['search'])
  let props = defineProps({
    searchText: {
      type: String,
      default: ''
    }
  })

  let searchText = ref('');
  watch(() => props.searchText, (newValue, oldValue) => {
    console.log(`searchText prop changed from ${oldValue} to ${newValue}`);
    searchText.value = newValue
  });
  const inputCustomStyle = {
    background: '#f6f6f6',
    color: '#4e5969',
    width: 'auto',
    height: '100%',
    fontSize: '24rpx',
    padding: '6rpx',
    paddingLeft: '20rpx',
  };
  const btnCustomStyle = {
    background: '#fff',
    color: '#4e5969',
    width: '108rpx',
    height: '54rpx',
    fontSize: '24rpx',
    marginRight: 0,
    padding: '6rpx',
    border: 'none',
  };

  const searchList = () => {
    console.log('搜索参数', searchText)
    emit('search', { searchText: searchText.value })
  }

  const pageRouter = usePageRouter();
  const back = () => {
    pageRouter.back();
  };
  onMounted(() => {
    if (props.searchText) {
      searchText.value = props.searchText
    }
  })
</script>

<style scoped lang="scss">
  .search-input {
    width: 432rpx;
    height: 66rpx;
  }
</style>
